<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery语法</title>

    <style>

        .d{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
            display: none;
        }

    </style>

    <!-- 引入jQuery -->
    <script src="../js/jquery-1.11.0.min.js"></script>

    <script>

        /* 预加载：让body中的内容先加载，再来加载jQuery代码 */
        $(function () {

            /* 给按钮绑定点击事件 */
            $(".btn").click(function () {

                //1.获取输入框中的value值
                var val = $(":text").val();
                alert(val)

                //2.赋值
                $(":text").val("你好，张三");

                //3.获取第一个li的文本内容
                alert($("li").first().text());

                //4.给id名称叫做p1的元素赋值html代码
                $("#p1").html("<span style='color: teal'>hello jQuery</span>");

                //5.给最后一个li改变字体颜色
                $("li:last").css({"color":"blue"});
            });


            /* 给li绑定点击事件 */
            $("li").click(function () {
                //获取当前点击第几个li   $(this)当前正在操作的jQuery对象  index()获得下标
                var index = $(this).index();
                alert(index);

                //找寻匹配的下标元素，并添加样式
                $("li").eq(index).css({"color":"red"});

                //显示
                //$(".d").show();
                $(".d").fadeToggle("slow","linear");
            });


        })

    </script>

</head>
<body>

    <ul>
        <li>aaaa</li>
        <li>bbbb</li>
        <li>cccc</li>
    </ul>

    <p id="p1"></p>
    <p id="p2"></p>

    <div class="d"></div>

    <input type="text" placeholder="请输入"/>
    <input type="button" class="btn" value="点击我" />

</body>

    <!-- 引入jQuery -->
    <!--<script src="../js/jquery-1.11.0.min.js"></script>
    <script>

    </script>-->

</html>